* {
  box-sizing: border-box;
}

.w {
  width: 1200px;
  margin: 0 auto;

}

.AD_img{
  position: relative;
  height: 90px;
  img{
    height: 100%;
    position: absolute;
    top: 0;
    left: -100px;
  }
  .off{
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(202, 179, 179);
    font-size: 15px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 15px;
    right: 250px;
  }
}
// 头部导航模块
.HeadNavModule {
  width: 100%;
  height: 36px;
  background-color: #000;


  .HeadNavModule_box {
    display: flex;
    width: 1200px;
    height: 36px;
    margin: 0 auto;

    .HeadNavModule_box_left {
      width: 600px;
      height: 36px;
      // background-color: rgb(220, 155, 155);

      >ul {
        display: flex;
        line-height: 36px;

        >li {
          padding: 0 8px;
          position: relative;

          &::before {
            content: "";
            width: 1px;
            height: 10px;
            display: block;
            position: absolute;
            top: 13px;
            right: 0;
            background: #414141;
          }

          &:last-child {
            // background-color: #fff;
            padding-right: 20px;

            .left_more {
              width: 119px;
              height: 146px;
              background-color: rgb(255, 255, 255);
              box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
              padding: 6px 0 12px;
              position: absolute;
              top: 36px;
              right: 0px;
              display: none;

              dl {
                display: flex;
                flex-direction: column;
                align-items: center;

                dt {
                  text-align: center;
                  font-size: 12px;
                  color: #777;

                  &:hover {
                    color: rgb(212, 23, 23);
                  }

                }
              }
            }

            &::before {
              content: "";
              width: 16px;
              height: 16px;
              background: transparent;
              background-image: url("../img/10073.svg");
              background-size: 377px 187px;
              background-position: -74px 0;
              position: absolute;
              top: 10px;
              right: 0px;
            }

            &:hover {
              >a {
                color: rgb(220, 22, 22);
              }

              background-color: #fdfdfd;

              &::before {
                background-position: -88px 0;
              }

              >.left_more {
                display: block;
                z-index: 2;
              }
            }
          }


          &:first-child {
            padding-left: 0;
          }

          a {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);

            &:hover {
              color: #fff;
            }
          }
        }
      }
    }

    .HeadNavModule_box_right {
      width: 500px;
      height: 36px;
      display: flex;
      justify-content: flex-end;

      >ul {
        display: flex;
        // line-height: 36px;
        // align-items: center;
        height: 36px;

        >li {
          display: flex;
          height: 36px;
          padding: 0 8px;
          align-items: center;
          position: relative;

          &:last-child:hover {
            >.app {
              display: flex;
              z-index: 2;
              box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
            }
          }

          &::before {
            content: "";
            width: 1px;
            height: 10px;
            display: block;
            position: absolute;
            top: 13px;
            right: -1px;
            background: #414141;
          }

          &:first-child {
            padding-left: 0;

            &>a:first-child {
              padding-right: 8px;
            }
          }

          a {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);

            &:hover {
              color: #fff;
            }
          }

          .customer_service {
            width: 84px;
            height: 88px;
            background-color: #fdfdfd;
            position: absolute;
            top: 36px;
            right: 0px;
            display: none;

            dl {
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 12px 18px;

              dt {
                line-height: 32px;
                text-align: center;
                height: 32px;
                font-size: 12px;
                color: #777;

                &:hover {
                  color: rgb(212, 23, 23);

                }

              }
            }

          }

          &:nth-last-child(-n+3) {
            padding-right: 24px;
            display: flex;

            >span {
              width: 16px;
              height: 16px;
              background: transparent;
              background-image: url("../img/10073.svg");
              background-size: 377px 187px;
              background-position: -74px 0;
              position: absolute;
              top: 10px;
              right: 0px;
            }

            &:hover {
              >a {
                color: rgb(220, 22, 22);
              }

              background-color: #fff;


              &>span {
                background-position: -88px 0;
              }
            }


          }
        }

        .service:hover {
          >.customer_service {
            z-index: 2;
            display: block;
            box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
          }
        }

        .Web_class {
          padding-top: 37px;
          position: absolute;
          width: 890px;
          height: 210px;
          background-color: #fdfdfd;
          display: flex;
          top: 36px;
          right: 0;
          color: #777;
          display: none;



          .Web_class_logo {
            width: 145px;
            height: 210px;
            display: flex;
            flex-direction: column;
            align-items: center;

            p {
              width: 52px;
              height: 52px;
              background: transparent;
              background-image: url("../img/10073.svg");
              background-size: 377px 187px;
              background-position: -210px 0px;
              margin-bottom: 4px;
            }

            h4 {
              font-size: 12px;
              color: #777;
              font-weight: 400;
            }
          }

          .content {
            width: 745px;
            height: 210px;

            >dl {
              display: flex;
              justify-content: flex-end;

              h3 {
                margin-bottom: 8px;
                font-size: 16px;
                color: #333;
              }

              dt {
                width: 185px;
                height: 210px;


                ul {
                  display: flex;
                  flex-wrap: wrap;

                  li {
                    width: 80px;
                    height: 20px;
                    margin-bottom: 4px;

                    &:hover {
                      color: #cf0a2c;
                    }
                  }
                }
              }
            }
          }
        }

        .net_nav {
          &:hover {
            >.Web_class {
              display: flex;
              z-index: 2;
              box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
            }
          }
        }
      }
    }

    .app {
      width: 244px;
      position: absolute;
      top: 36px;
      right: 0;
      background-color: #fdfdfd;
      display: none;

      >dl {
        >dt {
          display: flex;
          width: 244px;
          height: 111px;
          margin-top: 20px;
          border-bottom: 1px solid #e5e5e5;

          &:last-child {
            border-bottom: none;
          }

          img {
            width: 90px;
            height: 90px;
            margin-right: 12px;
            margin-left: 24px;
          }

          >div {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 90px;

            >h2 {
              font-size: 14px;
            }

            >P {
              color: #cf0a2c;
            }

            >ul {
              display: flex;

              >li {
                margin-right: 5px;
                width: 30px;
                height: 30px;
                background-color: rgb(31, 23, 23);

                &:last-child {
                  background: transparent;
                  background-image: url("../img/10073.svg");
                  background-size: 377px 187px;
                  background-position: -34.5px 0px;
                }

              }
            }
          }
        }
      }

      .title_shop {
        li {
          &:nth-child(1) {
            background: transparent;
            background-image: url("../img/10073.svg");
            background-size: 377px 187px;
            background-position: -1px 0px;
          }

          &:nth-child(2) {
            background: transparent;
            background-image: url("../img/10073.svg");
            background-size: 377px 187px;
            background-position: -40px -117px;
          }
        }
      }
    }

    .HeadNavModule_box_ShoppingCar {
      position: relative;

      .shopingcar {
        width: 100px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #424242;
        position: relative;
        z-index: 1;

        span {
          width: 16px;
          height: 16px;
          background: transparent;
          background-image: url("../img/10073.svg");
          background-size: 377px 187px;
          background-position: -107px -3px;
        }

        a {
          color: #ffffff99;
        }
      }

      .shoping_content {
        width: 460px;
        height: 232px;
        background-color: rgb(255, 255, 255);
        position: absolute;
        box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
        top: 36px;
        right: 0px;
        /* border: 1px solid #424242; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        display: none;
        z-index: 1;

        img {
          width: 80px;
          height: 80px;
          margin-bottom: 10px;
        }

        span {

          font-size: 14px;
          color: #a4a4a4;
        }

      }

      &:hover {
        &>.shoping_content {
          display: flex;
          z-index: 2;
          box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
        }

        >.shopingcar a {
          color: rgb(220, 22, 22);
        }

        >.shopingcar {
          background-color: #fff;
        }

        &>.shopingcar>span {
          background-position: -128px -3px;
        }
      }
    }
  }
}

// logo 导航模块
.LogoNavModule {
  background-color: #fff;

  .Search_module {

    width: 1200px;
    height: 74px;
    background-color: #fff;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    /* display: none; */
  }



  .Search_module>ul>li {
    font-size: 16px;
    color: #000;

    margin-left: 40px;
  }

  .Search_module>ul {
    display: flex;
    margin-left: 50px;
    margin-right: 280px;

  }

  .Search_module>ul>li:hover {
    color: rgb(220, 22, 22);
  }

  .Search_module>.shou:hover {
    color: rgb(220, 22, 22);
  }


  .Search_module>ul {
    /* margin-right: 40px; */
  }

  .Search_module>img {

    width: 103px;
  }

  .Search_module>.shou>span {
    font-size: 30px;
  }

  .Search_module_New {
    z-index: 2;
    width: 640px;
    height: 74px;
    background-color: #fff;
    position: relative;
    left: 420px;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;

    .recommend {

      display: flex;
      flex-direction: column;
      position: absolute;
      top: 74px;
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;
      width: 640px;
      height: 160px;
      padding: 0 24px;
      background-color: rgb(255, 255, 255);

      .recommend_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // width: 640px;
        height: 40px;



        h2 {
          font-size: 16px;
        }

        span {
          color: #a4a4a4;
          width: 16px;
          height: 16px;
          background-color: #fff;

          &:hover {
            color: #000000;
          }
        }
      }

      .recommend_conent {
        >ul {
          display: flex;
          flex-wrap: wrap;

          li {
            height: 28px;
            padding: 0 8px;
            margin: 0 8px 12px 0;
            background-color: rgba(0, 0, 0, 0.05);
            font-size: 12px;
            border-radius: 14px;
            line-height: 28px;

            &:hover {
              color: #cf0a2c;
            }
          }
        }
      }
    }

  }

  .Search_module_New>input {
    width: 514px;
    height: 36px;
    border: none;
    background-color: #f2f2f2;
  }

  .Search_module_New>span:nth-child(3) {
    width: 36px;
    height: 36px;
    font-size: 12px;
    text-align: center;
    line-height: 36px;
    background-color: #f2f2f2;
    border-radius: 0 18px 18px 0;
  }

  .Search_module_New>span:nth-child(1) {
    width: 36px;
    height: 36px;
    font-size: 18px;
    line-height: 36px;
    text-align: center;
    background-color: #f2f2f2;
    border-radius: 18px 0 0 18px;

  }
}

//轮播图模块
.Carousel_module_nav {
  width: 200px;
  height: 496px;
  position: absolute;
  top: 30px;
  left: 170px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 8px 0;
  z-index: 3;
  box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
}

.Carousel_module_nav>ul>li {
  height: 40px;
  font-size: 14px;
  padding-left: 24px;
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  align-items: center;
  opacity: 0.6;
}


/* 左侧nav */
.Carousel_module_nav>ul>li>dt {
  height: 496px;
  /* width: 1000px; */
  background-color: #fff;
  display: flex;
  flex-direction: column;
  /* justify-content: space-evenly; */
  position: absolute;
  /* flex-wrap: wrap; */
  /* z-index: 2; */
  top: 0;
  left: 200px;
  padding: 20px 0 0 20px;
  display: none;
}

.Carousel_module_nav>ul>li>dt>dl:last-of-type {
  width: 136px;
  height: 44px;
  background: url(../img/chaImage.png);
  background-size: cover;
  padding-left: 56px;
}

.Carousel_module_nav>ul>li:hover {
  background-color: #fff;
  opacity: 1;
}

.Carousel_module_nav>ul>li>dt>dl {
  width: 214px;
  height: 72px;
  /* background-color: pink; */
  margin: 0 16px 23px 0;
  display: flex;
  align-items: center;
}

.Carousel_module_nav>ul>li>dt>dl>img {
  width: 52px;
  height: 52px;
}

.menu_conent {
  position: absolute;
  z-index: 3;
  top: 30px;
  left: 370px;

  // box-shadow: 
  .sj {
    // opacity: 0;
    display: none;
  }

  .dn {
    // opacity: 0;
    display: none;
  }

  .pb {
    display: none;
  }

  .zhp {
    display: none;
  }

  .cd {
    display: none;
  }

  .ej {
    display: none;
  }

  .ms {
    display: none;
  }

  .cx {
    display: none;
  }

  .pj {
    display: none;
  }

  .st {
    display: none;
  }

  .jy {
    display: none;
  }

  .zz {
    display: none;
  }

  >ul {
    padding: 20px 18px 0 18px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 496px;
    background-color: #fff;
    box-shadow: 10px 8px 16px rgb(0 0 0 / 18%);

    li {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 214px;
      height: 72px;
      margin: 0px 16px 23.2px 0px;

      img {
        width: 52px;
        height: 52px;
      }

      .Trade_name {
        padding-left: 8px;
        width: 138px;
        height: 19px;
      }

      &:last-child {
        position: relative;

        img {
          width: 136px;
          height: 44px;
        }

        >span {
          position: absolute;
          right: 65px;
        }
      }
    }

  }
}


/* 分类模块 */

.Classification_module {
  margin-top: 24px;
}

.Classification_module>ul {
  height: 95px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.Classification_module>ul>li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Classification_module>ul>li:hover>img {
  transform: scale(1.5);
}

.Classification_module>ul>li:hover {
  font-weight: 700;
}

.Classification_module>ul>li>img {
  width: 48px;
  height: 48px;
}

/* 分类模块 */

//商品模块共享
.shopping_con_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  margin-top: 24px;

  >h3 {
    font-size: 24px;
    color: #000;
  }

  >span {
    font-size: 14px;
    color: #000;
  }
}

.shopping_con_body {
  >ul {
    display: flex;
    flex-wrap: wrap;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 9px 10px 0;
      width: 291px;
      height: 426px;
      background-color: #fff;
      overflow: hidden;

      &:hover {
        box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
      }

      .imgbox {
        // width: 180px;
        height: 193px;
        margin-bottom: 30px;

        img {
          width: 100%;
          height: 100%;
          opacity: 0;
        }
      }

      .conentbox {
        display: flex;
        flex-direction: column;
        align-items: center;

        .title_name {
          display: flex;
          align-items: center;
          margin-top: 10px;

          >span {
            background-color: #cf012c;
            font-size: 12px;
            color: rgb(255, 255, 255);
            border-radius: 5px;
            margin-right: 5px;
            padding: 0 2px;
          }

          h4 {
            font-size: 14px;
            color: 000;

          }
        }

        .profile {
          font-size: 13px;
          color: #000;
          opacity: .6;
          margin-top: 10px;
        }

        .Price {
          font-size: 16px;
          color: #cf012c;
          margin-top: 15px;
        }

        .characteristic {
          margin-top: 10px;

          span {
            font-size: 12px;
            border: 1px solid #cf0a2c;
            color: #cf012c;
            border-radius: 5px;
            padding: 0 2px 0 2px;
            margin: 0 2px 0 2px;
          }
        }
      }
    }
  }
}

.Recommend_body {
  >ul {
    .imgbox {
      img {
        transform: scale(1.3);
      }
    }

  }
}



/* 限时秒杀 */
.Instant_kill_body {
  display: flex;

  .time {
    width: 230px;
    height: 306px;
    background-color: rgba(207, 10, 44, 0.06);
    margin-right: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img {
      width: 48px;
      height: 48px;
    }

    .time_0 {
      margin-top: 8px;
      font-size: 20px;
      color: #cf0a2c;
      margin-bottom: 35px;
    }

    .time_text {
      margin-bottom: 17px;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.6)
    }

    .countDown {
      display: flex;
      align-items: center;

      span {
        width: 40px;
        height: 40px;
        background-color: rgb(0, 0, 0);
        opacity: .6;
        margin: 0 4px;
        border-radius: 3px;
        color: #fff;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }


  }

  >ul {
    li {
      width: 230px;
      height: 306px;
      background-color: #fff;

      .imgbox {
        width: 143px;
        height: 142px;

      }

      h3 {
        font-weight: 400;
      }
    }
  }
}

/* 全局定位 */
.quanjudignwee {
  position: fixed;
  bottom: 25px;
  right: 10px;
  z-index: 3;


  ul {
    width: 80px;
    // height: 292px;
    display: flex;
    flex-direction: column;
    padding: 4px 0 16px;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
    border-radius: 10px;

    li {
      width: 80px;
      height: 56px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 12px;
      opacity: .6;

      &:last-child {
        display: none;
      }

      &:hover {
        color: #cf0a2c;
      }

      >span {
        &:first-child {
          margin-bottom: 8px;
          font-size: 20px;
        }
      }
    }
  }



}








//底部模块
footer {
  margin-top: 40px;
  background-color: #fff;
}

.foot_conent {
  height: 120px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid rgb(233, 226, 226);

  h3 {
    width: 209px;
    height: 24px;
    display: flex;
    align-items: center;
    font-weight: 400;

    img {
      width: 24px;
      height: 24px;
      margin-right: 15px
    }

    ;

    span {
      font-size: 16px;
      color: #000;
    }
  }
}

.foot_service {
  display: flex;
  height: 311px;
  padding: 56px 0px 40px;

  .foot_service_left {
    display: flex;
    width: 954px;
    border-right: 1px solid rgb(233, 226, 226);

    dl {
      width: 159px;
      height: 213px;

      dt {
        font-size: 14px;
        color: #000;
        margin-bottom: 32px;
      }

      ul {
        display: flex;
        flex-direction: column;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);

        li {
          margin-bottom: 10px;
        }

        li:hover {
          color: #cf0a2c;
        }

        ;
      }
    }
  }

  .foot_service_right {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 248px;

    .phone_num {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 15px;

      h3 {
        font-size: 24px;
        color: #000;
        font-weight: 400;
      }

      >span {
        font-size: 12px;
        color: #000;
        margin-top: 2px;
      }
    }

    .online_sev {
      width: 170px;
      height: 34px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(0, 0, 0);
      border-radius: 20px;
      margin-bottom: 20px;

      span {
        color: rgb(255, 255, 255);

        &:first-child {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 24px;
          height: 24px;
          margin-right: 10px;
        }
      }
    }

    .foucse_wei {
      display: flex;
      align-items: center;

      >span {
        font-size: 13px;
      }

      img {
        width: 24px;
        height: 24px;
        margin-left: 10px
      }

      ;
    }
  }
}


.footer-warrant {
  height: 152px;
  padding-top: 34px;
  padding-bottom: 40px;
  display: flex;
  border-top: 1px solid #e9e2e2;

  .footer-warrant-logo {
    padding-right: 25px;

    img {
      width: 82px;
      height: 20px;
    }
  }

  .fl {
    width: 795px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);

    >a {
      height: 19px;
      display: inline;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.4);
      line-height: 19px;
      text-decoration: none;
    }

    >ul {
      display: flex;
      margin-bottom: 6px;

      li {
        padding-right: 6px;
        margin-right: 6px;
      }

      a {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.6);
        position: relative;

        &::after {
          position: absolute;
          top: 2px;
          right: -6.5px;
          z-index: 1;
          content: '';
          width: 1px;
          height: 9px;
          background: rgba(0, 0, 0, 0.1);
        }
      }
    }

    a:hover {
      color: rgb(195, 50, 50);
    }
  }

  .footer-warrant-img {
    margin-left: 200px;
  }
}